<template>
  <div class="content">
    <ul class="c2c-list">
      <li class="c2c-item" v-for='(item,key) of dataList' :key='key' @click='$router.push({path:"c2c/detail",query:{id:item.id,type:$route.query.type}})'>
        <div class="c2c-user-pic">
          <img :src="item.photo" alt="" v-if='item.photo'>
          <img src="http://up.qqya.com/allimg/201710-t/17-101804_132321.jpg" alt="" v-else>
        </div>
        <div class="c2c-desc">
          <div class="c2c-desc-top">
            <h3>{{item.userName}}</h3>
            <div class="price">
              {{item.entrustPrice}}
              <sup>CNY</sup>
              <!-- <sup>{{item.coinCore}}</sup> -->
            </div>
          </div>
          <div class="c2c-desc-button">
            <a href="javascript:;" class="btn btn-type1">{{'TRADE'|t}} {{item.dealNum}}</a>
            <a href="javascript:;" class="btn btn-type2">{{'PRAISE'|t}}90%</a>
            <a href="javascript:;" class="btn btn-type3">{{item.receivablesType|t}}</a>
          </div>
        </div>
      </li>
    </ul>
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10"></div>
    <zx-no-data v-model='showNoDataBool'></zx-no-data>
  </div>
</template>
<script>
  import { Form, Func, Auth } from '@/providers';
  import { C2c, Coins } from '@/services';
  export default {
    data() {
      return {
        dataList: [],
        showNoDataBool: false,
        loading: false,
        pageSize: 1
      };
    },
    methods: {
      // 加载更多
      async loadMore() {
        if (this.loading) { return false; };
        this.loading = true;
        let _queryType = this.$route.query.type;
        try {
          let res = await C2c.GetSpotEntrust({
            coinNo: '',   // 全部的话为""
            entrustState: '6',  // 0未成交，1已成交，2已撤销，3交易中 6全部
            entrustType: _queryType == 'buy' ? '1' : '0',   // 0为查询收购广告，1为查询出售广告
            receivablesType: '0', // 收付款方式（0：全部，1：银行卡，2：支付宝，3：微信）
            minPrice: '',  // 可传可不传
            maxPrice: '', // 可传可不传
            pageSize: this.pageSize,
            type: '0',
            lineSize: 10
          });
          this.showNoDataBool = res.data.dtoSize == 0 ? true : false;
          if (res.data.dtoList.length >= 10) {
            this.loading = false;
          }
          this.pageSize += 1;
          let map = new Map();
          map.set(1, 'BANKS').set(2, 'ALIPAYS').set(3, 'WECHATS');
          for (let item of res.data.dtoList) {
            item.receivablesType = map.get(item.receivablesType);
          }
          this.dataList = [...this.dataList, ...res.data.dtoList];
        } catch (error) {
          console.log(error);
        }
      }
    },
    watch: {
      '$route.query.type'(val) {
        this.pageSize = 1;
        this.dataList = [];
        this.loading = false;
        this.loadMore();
      }
    },
    created() {
      this.loadMore();
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/sass/c2c.scss";
</style>